<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>下单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/main.css"/>
    <style>
        .opera{
            width: .46rem;
            height: .46rem;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            font-size: .4rem;
            line-height: .46rem;
            box-sizing: border-box;
        }
        #masks{
            position: fixed;
            z-index: 10;
            width: 100%;
            height: 100%;
            top: 0;
            display: none;
        }
        #masks .shadow{
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
        }
        .coin{
            height:5rem;
            width:5.4rem;
            position:absolute;
            left: calc(50% - 2.7rem);
            top: calc(50% - 2.5rem);
            display: none;
        }
    </style>
</head>
<body>
    <article class="bigBox">
        <section class="container">
            <ul>
                <li class="bw plr24 goods_item flex_sb">
                    <!--<div class="ptb30 flex_a flex1">
                        <div><img src="../img/test.png" class="goods_pic"></div>
                        <div class="flex1 ml20">
                            <p>清风纸巾</p>
                            <p class="color2">￥2.00</p>
                            <p class="col9">库存：50</p>
                        </div>
                    </div>-->
                    <div class="flex_a col9">
                        <span class="opera flex_aj">-</span>
                        <cite class="mlr20">1</cite>
                        <span class="opera flex_aj">+</span>
                    </div>
                </li>
            </ul>
            <div class="flex_sb mt20 h120 bw plr30">
                <div>
                    <img src="../img/ico21.png" style="width: .5rem;">
                    <span class="ml20">微信支付</span>
                </div>
                <img src="../img/ico22.png" style="width: .48rem;">
            </div>
        </section>
        <footer class="flex h100">
            <div class="flex1 bw flex_a plr24">合计: ￥<span class="color2 money">0</span></div>
            <div class="w200 bgc1 colw flex_aj btn_tap">立即支付</div>
        </footer>
    </article>

    <!--弹窗-->
    <div id="masks">
        <div class="shadow"></div>
        <!--关注公众号-->
        <div class="coin border-r1">
            <div class="flex_a flex_column" style="background-color:#fffbea;">
                <img src="../img/payfail.png" alt="" style="width:2.73rem;height:1.79rem;" class="pt40 mb30">
                <p class="font15 ptb40">设备故障，出货失败</p>
            </div>
            <p class="bw ptb30 tac font16 con" style="border-bottom-left-radius: 0.1rem;border-bottom-right-radius:0.1rem; color:#ef8200;">退款</p>
        </div>

    </div>
</body>
</html>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/dlc.js"></script>
<script>



//商品渲染
dlc_request('/api/h5/getDeviceGoods',{'deviceNo':getUrlParam('deviceNo'),imei:getUrlParam('imei')},function(res){
    console.log(res);

    if(res.code==1){
    	$('.goods_item').prepend('<div class="ptb30 flex_a flex1">'+
           ' <div><img src="'+location.hostname+'/'+res.data.goodsImgUrl+'" class="goods_pic"></div>'+
            '<div class="flex1 ml20">'+
               ' <p class=goodsName>'+res.data.goodsName+'</p>'+
               ' <p class="color2">￥<span class="price">'+res.data.goodsPrice+'</span></p>'+
                '<p class="col9">库存：<span class="inventory">'+res.data.inventory+'</span></p>'+
            '</div>'+
        '</div>')
        $('.money').text(res.data.goodsPrice)
    }
});




//商品加减
$('.opera').on('click',function(){
	if($(this).index()==0){
		if($(this).next().text()>0){
			$(this).next().text($(this).next().text()*1 - 1)
			$('.money').text(($('.money').text()*1 - $('.price').text()*1).toFixed(2))
		}
	}else{
		if($(this).prev().text()*1<$('.inventory').text()*1){
			$(this).prev().text($(this).prev().text()*1 + 1)
			$('.money').text(($('.money').text()*1 + $('.price').text()*1).toFixed(2))
		}else{
			dlctipbox.show('库存不足')
		}
	}
})

//支付功能
var orderid,onOFF=0//开关
$('.btn_tap').click(function(){
	dlctipbox.loading()
	if($('.money').text()!=0){//先判断有无商品
		if(onOFF) return false
		onOFF = 1
		if(!orderid){//判断取消支付又重新支付
			dlc_request('/api/h5/createUserOrder',{'deviceNo':getUrlParam('deviceNo'),'imei':getUrlParam('imei'),'openId':getUrlParam('openid'),'num':$('cite').text(),'price':($('.price').text()*100),'totalPrice':($('.money').text()*100),'goodsName':$('.goodsName').text(),'goodsImgUrl':$('.goods_pic').attr('src')},function(res){
				 onOFF = 0;
				 orderid = res.data
				 dlctipbox.show('成功生成订单')
			    console.log(res);
			    if(res.code==1){
			    	dlc_request('/api/h5/orderPay',{orderNo:orderid,openId:getUrlParam('openid'),money:($('.money').text()*100)},function(ret){
					    console.log(ret);
					    jsApiParameters = ret.data;
			            callpay()
					})
			    }
			})
		}else{
			dlc_request('/api/h5/orderPay',{orderNo:orderid,openId:getUrlParam('openid'),money:($('.money').text()*100)},function(ret){
			    console.log(ret);
			    jsApiParameters = ret.data
	            callpay()
			})
		}
	}else{
		dlctipbox.show('请先选择商品')
	}
})






// 提交支付信息
var jsApiParameters = {};
//调用微信JS api 支付
function jsApiCall() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        jsApiParameters, // 提交的支付信息
        function(res) {
            //WeixinJSBridge.log(res.err_msg);
           // alert(JSON.stringify(res));
           dlctipbox.clear()
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                dlctipbox.show('支付成功');
                onOFF = 0;
                dlctipbox.loading();
                dlc_request('/api/h5/queryConsumeStatus',{orderNo:orderid},function(ret){
                    console.log(ret);
                    // alert(JSON.stringify(ret));
                    dlctipbox.clear();
                    if(ret.code==1){
                        dlctipbox.show(ret.msg);
                        setTimeout(function(){
                            history.go(-1)
                        },1500)
                    }else{
                        $('#masks,.coin').show();
                    }
                })
            } else {
                onOFF = 0;
                dlctipbox.show("取消支付");
                setTimeout(function(){
                    history.go(-1)
                },1500);
            }
        }
    );
}
//调用微信 支付
function callpay() {
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);

        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    } else {
        jsApiCall();
    }
}

//点击退款
$('.con').click(function(){
    $('#masks,.coin').hide();
    dlctipbox.loading('正在退款');
    dlc_request('/api/h5/orderRefund',{'orderNo':orderid},function(res){
        console.log(res);
        dlctipbox.clear();
        if(res.code==1){
            dlctipbox.show(res.msg);
        }else {
            dlctipbox.show(res.msg);
        }
    })
});
</script>






















